<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>slot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
    <script src="../../static/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <renderless>
            <h1 slot-scope="{exampleProp}">
                hello {{exampleProp}}
            </h1>
        </renderless> -->
        <rx-table :data="todos">
            <rx-table-column fieldname="id" label="id"></rx-table-column>
            <rx-table-column fieldname="text" label="文本"></rx-table-column>
            <rx-table-column fieldname="isComplete" label="状态">
                <template slot-scope="row">
                    <span v-if="row.isComplete">✓</span>
                </template>
            </rx-table-column>
        </rx-table>
    </div>
    <script>
        Vue.component('rx-table-column', {
            inject:['table'],
            props:['fieldname','label'],
            created() {
                this.table.headers.push(this.label)
                this.table.labels.push(this.fieldname)
            },
            // template:`<div>rx-table-column</div>`
            render(createElement){
                this.table.rowRender={}
                this.table.rowRender[this.fieldname]=this.$scopedSlots.default;
                console.log(this.$scopedSlots.default)
                // return createElement('h1', 'rx-table-column')
            }
        })
        Vue.component('rx-table', {
            props:['data'],
            provide(){
                return {
                    table:this
                }
            },
            data(){
                return {
                    headers:[],
                    labels:[]
                }
            },
            beforeCreate(){
                console.log(this);
            },
            created() {
                console.log(this);
            },
            mounted () {
                console.log(this);
            },
            render(h){
                return (<div>52324</div>)
            //     return h(`<div>
            //     <slot></slot>
            //     <table>
            //         <tbody>
            //             <tr>
            //                 <th v-for="(item,index) in headers" :key="index">{{item}}</th>
            //             </tr>
            //             <tr v-for="(item,index) in data" :key="index">
            //                 <td v-for="(field,index) in labels" :key="index">{{item[field]}}</td>
            //             </tr>
            //         </tbody>
            //     </table>
            // </div>`,this.$slots.default)
                // return h('h1')
            }
        })
        new Vue({
            el:'#app' ,
            data(){
                return {
                    todos:[{
                        id:1,
                        text:'写个table',
                        isComplete:false
                    },{
                        id:2,
                        text:'写个button',
                        isComplete:true
                    }]
                }
            }   
        })
    </script>

</body>

</html>